<template>
  <div>
    <el-form :inline="true" :model="form">
      <el-form-item>
        <el-button type="primary" @click="getUsers">Query</el-button>
      </el-form-item>
      <el-form-item label="Uid">
        <el-input v-model.trim="form.uid" clearable @change="getUsers" placeholder="Uid fuzzy query"></el-input>
      </el-form-item>
      <el-form-item label="Role">
        <el-select v-model="form.role" @change="getUsers" style="width: 150px;">
          <el-option label="All" :value="-1"></el-option>
          <el-option label="Person User" :value="1"></el-option>
          <el-option label="Administrators" :value="2"></el-option>
          <el-option label="Super Admin" :value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-form>


    <el-table :data="tableData" border style="width: 100%" empty-text="There is currently no data available">
      <el-table-column prop="uid" label="uid" width="180">
      </el-table-column>
      <el-table-column prop="username" label="username" width="180">
      </el-table-column>
      <el-table-column prop="phone" label="phone">
      </el-table-column>
      <el-table-column prop="role" label="role" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.role == 1">Person User</span>
          <span v-else-if="scope.row.role == 2">Administrators</span>
          <span v-else-if="scope.row.role == 3">Super Admin</span>
        </template>
      </el-table-column>
      <el-table-column prop="longitude" label="longitude" width="150">
      </el-table-column>
      <el-table-column prop="latitude" label="latitude" width="150">
      </el-table-column>
      <el-table-column prop="point.person" label="personal points">
      </el-table-column>
      <el-table-column prop="point.share" label="share points">
      </el-table-column>
      <el-table-column prop="last_login" label="last_login">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { GetUsersAPI } from '@/api'
export default {
  data() {
    return {
      tableData: [],

      form: {
        uid: '',
        role: -1
      }
    }
  },
  methods: {
    // Query all users by form
    async getUsers() {
      let { data } = await GetUsersAPI(this.form)
      this.tableData = data.users
    }
  },
  mounted() {
    this.getUsers()
  }
}
</script>
<style scoped></style>